<!-- 浮球 -->
<template>
	<view class="vk-data-float-ball" v-if="complete">
		<!-- 回到顶部 -->
		<u-back-top
			:scroll-top="scrollTop"
			:icon-style="{
				fontSize: '32rpx',
				color: '#ffffff'
			}"
			:custom-style="{
				backgroundColor: 'rgba(0, 0, 0, 0.6)'
			}"
			:bottom="200 + rightBtnsCom.length * 100"
		></u-back-top>
		<!-- 返回按钮 -->
		<view
			class="ball-btn left-btn"
			@click="pageBack"
			v-if="data.showBack"
			:style="{
				bottom: 200 + leftBtns.length * 100 + 'rpx',
				zIndex: zIndex
			}"
		>
			<u-icon name="arrow-left" color="#FFFFFF" size="38"></u-icon>
		</view>

		<view
			class="ball-btn right-btn"
			@click="customEvent(item)"
			v-for="(item, index) in rightBtnsCom"
			:key="index"
			:style="{
				bottom: 200 + index * 100 + 'rpx',
				zIndex: zIndex
			}"
		>
			<!-- 联系客服 -->
			<u-button
				v-if="item === 'contact'"
				hover-class="none"
				shape="circle"
				size="mini"
				open-type="contact"
				:plain="true"
				:hair-line="false"
				:custom-style="{
					border: 0,
					width: '80rpx',
					height: '80rpx',
					backgroundColor: 'rgba(0, 0, 0, 0)'
				}"
			>
				<u-icon name="server-man" color="#FFFFFF" size="38"></u-icon>
			</u-button>
			<!-- 登录 -->
			<view v-else-if="item === 'login'">登录</view>
		</view>
	</view>
</template>

<script>
export default {
	name: "vk-data-float-ball",
	props: {
		scrollTop: {
			type: Number,
			default() {
				return 0;
			}
		},
		// 左侧按钮 (暂不支持)
		leftBtns: {
			type: Array,
			default() {
				return [];
			}
		},
		// 右侧按钮,暂只支持联系客服
		rightBtns: {
			type: Array,
			default() {
				return [];
			}
		},
		// 强制显示返回按钮
		showBack: {
			type: Boolean
		},
		custom: {
			type: Array,
			default() {
				return [];
			}
		},
		zIndex: {
			type: [Number],
			default: 900
		},
	},
	data: function() {
		// 组件创建时,进行数据初始化
		return {
			data: {
				showBack: false
			},
			complete: false
		};
	},
	//组件创建时,进行数据初始化
	created: function() {
		let that = this;
		let currentPages = getCurrentPages();
		if (currentPages && currentPages.length > 1) {
			// #ifdef H5
			that.data.showBack = true;
			// #endif
			// #ifndef H5
			if (that.showBack) that.data.showBack = true;
			// #endif
		} else {
			that.data.showBack = false;
		}
	},
	mounted: function() {
		setTimeout(() => {
			this.complete = true;
		}, 100);
	},
	methods: {
		// 返回
		pageBack() {
			let currentPages = getCurrentPages();
			if (currentPages && currentPages.length > 1) {
				uni.navigateBack({
					delta: 1
				});
			}
		},
		customEvent(name) {
			let that = this;
			let { custom = [], vk } = that;
			if (name === "login") {
				if (custom.indexOf(name) === -1) {
					let config = vk.callFunctionUtil.getConfig();
					vk.reLaunch(config.login.url);
				}
			}
			that.$emit(name);
		}
	},
	computed: {
		rightBtnsCom() {
			let that = this;
			let arr = [];
			let { rightBtns = [] } = that;
			rightBtns.map((item, index) => {
				if (item === "contact") {
					// #ifdef MP-WEIXIN
					arr.push(item);
					// #endif
				} else {
					arr.push(item);
				}
			});

			return arr;
		}
	}
};
</script>

<style lang="scss" scoped>
.vk-data-float-ball {
	.ball-btn {
		width: 80rpx;
		height: 80rpx;
		position: fixed;
		border-radius: 50%;
		background-color: rgba(0, 0, 0, 0.6);
		display: flex;
		justify-content: center;
		align-items: center;
		color: #ffffff;
		z-index: 900;
	}
	.left-btn {
		left: 40rpx;
	}
	.right-btn {
		right: 40rpx;
	}
}
</style>
